<template>
  <!-- 财务看板 -->
  <div id="financeBoard">
    <div class="selectYear">
      <el-date-picker
        v-model="year"
        type="year"
        value-format="YYYY"
        placeholder="请选择年"
      >
      </el-date-picker>
    </div>
    <count-list :date="year"></count-list>
    <div class="row">
      <total-money :date="year"></total-money>
      <proportion-of-total :date="year"></proportion-of-total>
    </div>
    <div class="row">
      <proportion-of-loan-type :date="year"></proportion-of-loan-type>
      <loan-count :date="year"></loan-count>
    </div>
    <div class="row">
      <reimburse-count :date="year"></reimburse-count>
      <proportion-of-reimburse-type :date="year"></proportion-of-reimburse-type>
    </div>
    <div class="row">
      <proportion-of-payment :date="year"></proportion-of-payment>
      <payment-count :date="year"></payment-count>
    </div>
  </div>
</template>
<script>
import countList from './components/countList.vue'
import totalMoney from './components/totalMoney.vue'
import proportionOfTotal from './components/proportionOfTotal.vue'
import proportionOfLoanType from './components/proportionOfLoanType.vue'
import loanCount from './components/loanCount.vue'
import reimburseCount from './components/reimburseCount.vue'
import proportionOfReimburseType from './components/proportionOfReimburseType.vue'
import proportionOfPayment from './components/proportionOfPayment.vue'
import paymentCount from './components/paymentCount.vue'

export default {
  name: 'financeBoard',
  data () {
    return {
      year: new Date().getFullYear().toString()
    }
  },
  components: {
    countList,
    totalMoney,
    proportionOfTotal,
    proportionOfLoanType,
    loanCount,
    reimburseCount,
    proportionOfReimburseType,
    proportionOfPayment,
    paymentCount
  },
  beforeMount () {
  }
}
</script>
<style lang="scss" scoped>
#financeBoard {
  padding: 20px;
  .selectYear {
    // text-align: right;
    margin-bottom: 20px;
  }
  .row {
    display: flex;
    height: 500px;
    margin-top: 20px;
  }
}
</style>